<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="keywords" content="addSVGMarkerGridOverlay,tileXYToQuadKey" />
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <title>HERE Maps API Example: Adding a Grid showing the zoom, column, row and qaudkey of a tile overlay source</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>

  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript"
    data-map-container="mapContainer"
    data-params="maps"
    data-callback="afterHereMapLoad"
    data-libs="marker-grid-overlay"
    data-parent="demos/svg-grid-overlay/">
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <script type="text/javascript" charset="UTF-8" src="http://nls.tileserver.com/api.js"></script>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
</head>
<body>
  <h1>Adding a Grid showing the zoom, column, row and quadkey of a tile overlay source</h1>

  <p>
   This example adds an Overlay which retrieves Map Tiles from a tile server run by the
   <a href="http://geo.nls.uk/maps/api/">National Library of Scotland</a><br/>
   The mapping is based on out-of-copyright Ordnance Survey maps, dating from the 1920s to the 1940s.
   <br/>
  </p><p>
   A second overlay displays the column, row, zoom and quadkey of each tile based on the normalised mercator projection.
   This can be used to align and debug tile sources.
  </p>

   <div>
     <label for="slider" >Opacity</label> <br/><div id="slider" style="left:4em;top:-1em;width:100px;"/>
   </div>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
  <div id="src"><br/>
      <p>The grid control can be loaded using the following <code>&lt;script&gt;</code> element:
      <pre><code class='prettyprint'>&lt;script type="text/javascript" charset="UTF-8" src="<a href="libs/marker-grid-overlay.js">libs/marker-grid-overlay.js</a>"&gt;&lt;/script></code></pre>
  <p>Code:</p></div>
<script type="text/javascript" >
//<![CDATA[
var map,
  nlsOverlay;

function setUpSlider() {
  $('#slider').slider({
  //  range: true,
    min: 0,
    max: 100,

    value: 100,
    slide: function (event, ui) {
      nlsOverlay.opacity = (ui.value / 100);
      map.overlays.remove(nlsOverlay);
      map.overlays.add(nlsOverlay);

    }
  });
  $('#slider').slider('value', 50);
}

function tileXYToQuadKey(xTile, yTile, z) {
  var quadKey = "";
  for (var i = z; i > 0; i--) {
    var digit = "0",
      mask = 1 << (i - 1);
    if ((xTile & mask) != 0) {
      digit++;
    }
    if ((yTile & mask) != 0) {
      digit++; 
      digit++;
    }
    quadKey += digit;
  } //for i return quadKey; 
  
  return quadKey;
}

function addSVGMarkerGridOverlay(map) {
  // It is also possible to create an Overlay which displays which tiles are currently beig displayed.
  var tileUrl = function getTileUrl(column, row, zoom) {
    var svgParser = new nokia.maps.gfx.SvgParser(),
      iconSVG = '<svg width=\'256\' height=\'256\' xmlns=\'http://www.w3.org/2000/svg\'>' +
        '<rect width=\'256\' height=\'256\' style=\'fill:none;stroke:black;stroke-width:5;\'></rect>' +
        '<text x=\'100\' y=\'80\' font-size=\'10pt\' font-family=\'arial\' font-weight=\'bold\' ' +
        'text-anchor=\'left\' fill=\'black\' textContent=\'zoom:__ZOOM__\'>zoom:__ZOOM__</text>' +
        '<text x=\'100\' y=\'100\' font-size=\'10pt\' font-family=\'arial\' font-weight=\'bold\' ' +
        'text-anchor=\'left\' fill=\'black\' textContent=\'col:__COLUMN__\'>col:__COLUMN__</text>' +
        '<text x=\'100\' y=\'120\' font-size=\'10pt\' font-family=\'arial\' font-weight=\'bold\' ' +
        'text-anchor=\'left\' fill=\'black\' textContent=\'row:__ROW__\'>row:__ROW__</text>' +
        '<text x=\'50\' y=\'170\' font-size=\'10pt\' font-family=\'arial\' font-weight=\'bold\' ' +
        'text-anchor=\'left\' fill=\'black\' textContent=\'quadkey:__QUAD__\'>quadkey:__QUAD__</text>' +
        '</svg>',
      svg = iconSVG
        .replace(/__ZOOM__/g, zoom)
        .replace(/__COLUMN__/g, column)
        .replace(/__ROW__/g, row)
        .replace(/__QUAD__/g,  tileXYToQuadKey(column, row, zoom));
    return new nokia.maps.gfx.GraphicsImage(svgParser.parseSvg(svg));
  },
    tileURLOverlay =  new MarkerGridOverlay(tileUrl);
  map.components.add(tileURLOverlay);
}

function getTileUrl(zoom, row, column) {
  return NLSTileUrlOS(column, row, zoom);
}

function showCopyright(area, zoom) {
  if (zoom < 5 || zoom > 20) {
    return [];
  }

  return [
    {
      label: 'Historical maps from <a href=\'http://geo.nls.uk/maps/api/\'>NLS Maps API<\/a>',
      alt: 'Historical maps from the National Library of Scotland'
    }
  ];
}

function addTileOverlayToMap(map) {
  map.set('zoomLevel', 11);
  map.set('center', [55.953056, -3.188889]);


  var tileProviderOptions = {
    getUrl: getTileUrl,
    max: 20,
    min: 5,
    opacity: 0.5,
    alpha: true,
    getCopyrights: showCopyright
  };
  nlsOverlay = new nokia.maps.map.provider.ImgTileProvider(tileProviderOptions);
  map.overlays.add(nlsOverlay);
}

function afterHereMapLoad(theMap) {
  map = theMap;
  addTileOverlayToMap(map);
  addSVGMarkerGridOverlay(map);
  $.getScript(HereMapsConstants.JSLibs.jQueryUIUrl, setUpSlider);
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>
